<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3274111_89z9qptelmm.css">
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    <script>
        L2Dwidget.init({
            //初音
            // "model": { "jsonPath":"https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json", "scale": 1, "hHeadPos":0.5, "vHeadPos":0.618 },
            //可爱女
            // "model": { "jsonPath": "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json", "scale": 1, "hHeadPos": 0.5, "vHeadPos": 0.618 },
            //可爱男
            // "model": {"jsonPath":"https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json", "scale": 1, "hHeadPos":0.5, "vHeadPos":0.618 },            
            // 小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
            // 萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
            // 白猫：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
            // 黑猫： https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
            "model": { "jsonPath": "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json", "scale": 1, "hHeadPos": 0.5, "vHeadPos": 0.618 },
            // 小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
            // 小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
            // 初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json
            // 圣职者妹妹：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
            // 茶杯犬：https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
            // 绿毛妹妹：https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json
            // 金龟子妹妹：https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json
            // https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json
            // https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json
            // 小阿狸： https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json
            // https://unpkg.com/live2d-widget-model-nietzche@1.0.5/assets/nietzche.model.json
            // https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json
            // 女学生： https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json
            "display": { "position": "left", "width": 100, "height": 120, "hOffset": 0, "vOffset": 0 },
            "mobile": { "show": true, "scale": 0.5 },
            "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 },
            "dialog": {
                enable: true,
                script: {
                    'tap body': '喵~',
                    'tap face': '喵喵~',
                }
            }
        });
    </script>
    <title>
        <%= htmlWebpackPlugin.options.isProd ? '' : 'dev-' %>万能商城
    </title>
    <% if(htmlWebpackPlugin.options.isProd) { %>
        <!-- css文件 -->
        <link rel="stylesheet" href="//at.alicdn.com/t/font_3274111_89z9qptelmm.css">
        <!-- nprogress 的样式表文件 -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
        <!-- element-ui 的样式表文件 -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.6/theme-chalk/index.css" />

        <!-- js文件 -->
        <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
        <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
        <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
        <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
        <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
        <!-- element-ui 的 js 文件 -->
        <script src="https://cdn.staticfile.org/element-ui/2.15.6/index.js"></script>
        <% } %>
</head>

<body>
    <noscript>
        <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
                Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->

    <script src="https://cdn.bootcss.com/canvas-nest.js/2.0.4/canvas-nest.js" type="text/javascript" color="107,199,255"
        opacity="0.7" count="200" zIndex="1"></script>

    <!-- 首先导入jq插件 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        //鼠标点击特效
        //页面加载事件
        jQuery(function () {

            //声明变量
            var 点击数 = 0;

            //给页面创建点击事件
            $("html").click(function (e) {

                //创建颜色库
                //随机颜色
                //创建颜色码
                const 前颜色码库 = new Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99',
                    'aa', 'bb', 'cc', 'dd', 'ee', 'ff');
                const 中颜色码库 = new Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99',
                    'aa', 'bb', 'cc', 'dd', 'ee', 'ff');
                const 后颜色码库 = new Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99',
                    'aa', 'bb', 'cc', 'dd', 'ee', 'ff');

                //从颜色库选取一种颜色;当然这是数组的方式;随机性
                var 前颜色码 = Math.floor(Math.random() * 前颜色码库.length);
                var 中颜色码 = Math.floor(Math.random() * 中颜色码库.length);
                var 后颜色码 = Math.floor(Math.random() * 后颜色码库.length);

                // console.log("前颜色码 = " + 前颜色码 + "; 中颜色码 = " + 中颜色码 + "; 后颜色码 = " + 后颜色码 + ";")
                // console.log("#" + 前颜色码库[前颜色码] + 中颜色码库[中颜色码] + 后颜色码库[后颜色码]);

                //每当鼠标点击页面增加点击数
                点击数++;

                //创建元素; 创建的元素是span元素,这个元素的内容是"鼠标点击了第" + 点击数(这个是一个变量) + "次"
                // var 创建元素 = $("<span>").text("鼠标点击了第" + 点击数 + "次");
                var 创建元素 = $("<span>").text("+" + 点击数);

                //在页面上添加span元素
                jQuery("html").append(创建元素);

                //获取鼠标点击坐标
                var 横坐标 = e.pageX;
                var 纵坐标 = e.pageY;

                //给span元素添加css样式
                创建元素.css({
                    "z-index": 999, //设置或获取定位对象的堆叠次序(z-index):999
                    "top": 纵坐标 - 20, //上(top):y-20
                    "left": 横坐标, //左:x
                    "position": "absolute", //定位:绝对定位
                    "font-weight": "bold", //字体粗细:粗体
                    "color": "#" + 前颜色码库[前颜色码] + 中颜色码库[中颜色码] + 后颜色码库[后颜色码], //颜色:绿色
                    "user-select": "none", //使文字不被选中
                });

                //
                创建元素.animate({
                    "top": 纵坐标 - 180, //上:y-180
                    "opacity": 0 //透明度(opacity):0
                }, 2000, //1500,调节动画速度
                    function () { //功能函数
                        创建元素.remove(); //$i的删除
                    }
                );

            })
        })
    </script>
</body>

</html>